<template>
  <div class="child1">
    {{infoStore.count}}
    <p @click="addTodo">{{todoStore.todos}}</p>
    <br>
    <p>{{todoStore.arr}}</p>
    <p>{{todoStore.total}}</p>
  </div>
</template>

<script setup lang="ts">
import useInfoStore from "@/store/modules/info";
import useTodoStore from "@/store/modules/todo";
import { watch } from "vue";

let infoStore = useInfoStore();
let todoStore = useTodoStore();
const addTodo = () => {
  todoStore.addTodo();
}

// 监听pinia变化
watch(()=> infoStore.count, (newVal, oldVal) => {
  console.log(`count changed: ${newVal} ${oldVal}`);
})
</script>

<style scoped>
.child1 {
  width: 200px;
  height: 200px;
  background: hotpink;
}
</style>